<div class="panel animation-fade">
  <div class="panel-body">
    <div class="row">
      <!-- Popover -->
         <div class="col-lg-12">
          <div class="example-wrap">
            <h4 class="example-title">Popover      <small>(<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/popover">ui.bootstrap.popover</a>)</small></h4>
            <div class="example">
              <div class="row">
                <div class="col-md-6 show-grid" ng-controller="PopoverDemoController">
                  <h4>Dynamic</h4>
                    <div class="form-group">
                      <label>Popup Text:</label>
                      <input type="text" ng-model="dynamicPopover" class="form-control">
                    </div>
                    <div class="form-group">
                      <label>Popup Title:</label>
                      <input type="text" ng-model="dynamicPopoverTitle" class="form-control">
                    </div>
                    <button popover="{{dynamicPopover}}" popover-title="{{dynamicPopoverTitle}}" class="btn btn-default">Dynamic Popover</button>
                    
                    <hr />
                    <h4>Positional</h4>
                    <button popover-placement="top" popover="On the Top!" class="btn btn-default">Top</button>
                    <button popover-placement="left" popover="On the Left!" class="btn btn-default">Left</button>
                    <button popover-placement="right" popover="On the Right!" class="btn btn-default">Right</button>
                    <button popover-placement="bottom" popover="On the Bottom!" class="btn btn-default">Bottom</button>
                    
                    <hr />
                    <h4>Triggers</h4>
                    <p>
                      <button popover="I appeared on mouse enter!" popover-trigger="mouseenter" class="btn btn-default">Mouseenter</button>
                    </p>
                    <input type="text" value="Click me!" popover="I appeared on focus! Click away and I'll vanish..."  popover-trigger="focus" class="form-control">

                    <hr />
                    <h4>Other</h4>
                    <button Popover-animation="true" popover="I fade in and out!" class="btn btn-default">fading</button>
                    <button popover="I have a title!" popover-title="The title." class="btn btn-default">title</button>
                </div>
                <div class="col-md-6">
                   <p>A lightweight, extensible directive for fancy popover creation. The popover directive supports multiple placements, optional transition animation, and more.</p>

                  <p>Like the Bootstrap jQuery plugin, the popover <strong>requires</strong> the tooltip module.</p>

                  <p>The popover directives provides several optional attributes to control how it will display:</p>

                  <ul>
                    <li><code>popover-title</code>: A string to display as a fancy title.</li>
                    <li><code>popover-placement</code>: Where to place it? Defaults to "top", but also accepts "bottom", "left", "right".</li>
                    <li><code>popover-animation</code>: Should it fade in and out? Defaults to "true".</li>
                    <li><code>popover-popup-delay</code>: For how long should the user have to have the mouse over the element before the popover shows (in milliseconds)? Defaults to 0.</li>
                    <li><code>popover-trigger</code>: What should trigger the show of the popover? See the <code>tooltip</code> directive for supported values.</li>
                    <li><code>popover-append-to-body</code>: Should the tooltip be appended to <code>$body</code> instead of the parent element?</li>
                  </ul>

                  <p>The popover directives require the <code>$position</code> service.</p>

                  <p>The popover directive also supports various default configurations through the $tooltipProvider. See the <a href="#tooltip">tooltip</a> section for more information.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- End Popover -->
    </div>
  </div>
</div>
